<template>
	<view class="page">
		<view class="myTextarea" ref="wTextareaContentw">
			<!-- vue会将不存在的元素删除 -->
			<!-- <view class="input" ref="input" @click="inputClick"  id="input1"></view> -->
			<my-textarea v-model="text"></my-textarea>
			
		<!-- 	<view class="myTextarea_input" :contenteditable="true" :spellcheck="false" placeholder="文字" ref="wTextareaContent" :id="contentId" @click="inputClick"
				@focus="isLocked = true" @blur="isLocked = false" @keydown.delete="handleDelete($event)"
				@input="handleInput($event.target)">
			</view>
			<u-tag color="blue" text="测试"></u-tag> -->
		</view>
	</view>
</template>

<script>
	import MyTextarea from '@/components/textarea/textarea.vue';
	export default {
		components: {
			MyTextarea
		},
		data() {
			return {
				text: '',
				contentId: `${this.getGuid()}`,
				isLocked: false
			}
		},
		onShow(){
			console.log("contentId",this.contentId)
			console.log(this.$refs.wTextareaContentw)
		},
		methods: {
			getGuid() {
			  // 生成随机ID
			  return `r${new Date().getTime()}d${Math.ceil(Math.random() * 1000)}`;
			},
			handleInput(target) {
			  // 即时更新数据
			  this.updateData(target.innerHTML);
			  this.currentText = target.innerText;
			},
			updateData(text) {
			  this.$emit('input', text);
			},
			inputClick(e) {
			  // 监听点击事件
			  console.log("e",e)
			  console.log(this.$refs.input)
			  
			  
			 //  this.isLocked = true;
			 //  const TAG_NAME = e.target.nodeName;
			 
			 //  if (TAG_NAME === this.tag.toUpperCase()) {
			 //    // 点击模版标签时，记录id
			 //    this.currentTagId = e.target.id;
			 //    e.target.className = 'active';
			 //  } else if (this.currentTagId) {
			 //    // 清空active样式
			 //    let target = document.getElementById(this.currentTagId);
			 //    target.className = '';
			 //    this.currentTagId = null;
			 //  } else {
			 //    this.currentTagId = null;
			 //  }
			},
			addTag(text) {
				this.$refs.testText.addTag(text)
				console.log('testdata', this.testData)
				this.show = false
			},
			click(e) {
				console.log("e", e)
			}
		}
	}
</script>

<style lang="scss">
	// 给标签默认样式，不可scoped
	.myTextarea {
		wise {
			color: #26a2ff;
			padding: 0 1px;
			white-space: nowrap;
			cursor: default;
			-webkit-user-modify: read-only !important;
		}

		.active {
			background: #dcdfe6;
		}
		
	}
</style>
<style lang="scss" scoped>
	$borderColor: #333;
	$bgColor: #f5f7fa;
	$textColor: #666;

	.myTextarea {
		width: 100%;
		box-sizing: border-box;
		border-radius: 4px;
		border: 1px solid $borderColor;
		margin-bottom: 15px;
		overflow: hidden;
		position: relative;
		.input{
			width: 100%; min-height: 200rpx;line-height: 1.5;padding: 20rpx;word-break: break-word;box-sizing: border-box;
			-webkit-user-modify: read-write-plaintext-only !important;
			
		}
		.input:empty:before {
			content:"请输入内容" ;
			color: #A9A9A9;	
		}

		// &_input {
		// 	width: 100%;
		// 	min-height: 100px;
		// 	box-sizing: border-box;
		// 	padding: 10px;
		// 	line-height: 1.5;
		// 	word-break: break-word;
		// 	// 允许编辑，禁止富文本
		// 	-webkit-user-modify: read-write-plaintext-only !important;

		// 	&:focus {
		// 		outline: none;
		// 	}
		// 	*[contenteditable="true"]:empty:before {
		// 		    content: attr(placeholder);
				
		// 		    color: #A9A9A9;
				
		// 		}
		// }

		&_tools {
			padding: 0 10px;
			height: 40px;
			line-height: 40px;
			border-top: 1px solid $borderColor;
			background-color: $bgColor;
			color: $textColor;
			font-size: 12px;

			&__item {
				display: inline-block;
				line-height: 1;
				padding: 5px 8px;
				margin-right: 8px;
				color: $textColor;
				cursor: pointer;
				border: 1px solid $borderColor;
				border-radius: 4px;
				background: #fff;
				transition: all 0.3s;

				&:hover {
					background: $bgColor;
					opacity: .7;
				}

				&:focus {
					outline: none;
				}
			}

			&__text {
				display: inline-block;
				line-height: 40px;
				padding: 0 8px;
				float: right;
				color: $textColor;
				cursor: default;
				transition: all 0.3s;

				&:hover {
					opacity: 1;
				}

				&.__danger {
					color: red;
				}
			}
		}
	}
</style>
